<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>添品网注册第一步</title>
  <link rel="stylesheet" href="../css/global.css"/>
  <link rel="stylesheet" href="../css/main.css"/>

  <script src="../js/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="login registerStep1">
  <div class="header">
    <div class="content-wrap">
      <a href="" class="logo">
        <img src="../images/logo.png" alt=""/>
        <span class="tt">欢迎注册</span>
      </a>
      <ul class="icons">
        <li>
          <p>厂家直供<br>正品保障</p>
          <img src="../images/head-icon1.png" alt=""/>
        </li>
        <li>
          <p>免费拿样<br>批发无忧</p>
          <img src="../images/head-icon2.png" alt=""/>
        </li>
        <li>
          <p>全国送达<br>48小时发货</p>
          <img src="../images/head-icon3.png" alt=""/>
        </li>
      </ul>
    </div>
  </div>
  <div class="main">
    <div class="content-wrap">
      <div class="navs">
        <ul class="list">
          <li class="current">验证手机<span class="stepNumber inlineBlock">1</span></li>
          <li>设置密码<span class="stepNumber inlineBlock">2</span></li>
          <li>注册成功<span class="stepNumber inlineBlock">3</span></li>
        </ul>
      </div>
      <div class="registArea">
        <div class="item">
          <form action="">
            <div class="positionr">
              <input type="text" placeholder="请输入手机号码" class="phoneNum">
              <p class="error0">输入正确的11位手机号码</p>
              <p class="error1">该手机号码已经注册</p>
              <p class="error2">请输入您的手机号码</p>
            </div>
            <div class="positionr">
              <input type="text" placeholder="请输入手机收到的验证码" class="codeInput">
              <!--<span class="inlineBlock getCode">获取验证码</span>-->
              <span class="inlineBlock getCode">重发（59秒）</span>
              <p class="error3">验证码错误，请重新输入</p>
              <p class="error4">请输入短信验证码</p>
            </div>
            <div>
              <span class="inlineBlock registerNext">下一步</span>
            </div>
          </form>
          <p class="subTxt">已有账号？<a href="">登录</a></p>
        </div>

        <div class="item">
          <p class="tt0">您的手机号为： 18356195139</p>
          <div class="positionr">
            <input type="password" class="password1 errorBor" placeholder="请设置您的密码">
            <p class="passwordError">密码格式为6-20位字符</p>
          </div>
          <div class="positionr">
            <input type="password" class="password2 errorBor" placeholder="请再次输入您的密码">
            <p class="passwordError">两次输入的密码不一致</p>
          </div>

          <p><span class="inlineBlock completeRegist">完成注册</span></p>
          <p class="txt1">点击“完成注册”，即表示您同意并愿意遵守<a href="">添品网用户注册协议</a></p>
        </div>

      </div>
    </div>
  </div>
  <div class="mask"></div>
  <div class="regist01Pop">
    <p class="tt1">请输入右侧图中的二维码</p>
    <div class="code positionr">
      <input type="text" placeholder="图片验证码" class="errorBor">
      <img src="" alt="" class="codes">
      <p class="error5">请输入验证码</p>
      <!--验证码错误，请重新输入-->
    </div>
    <p class="confirmBox"><span class="inlineBlock confirmBtn">确定</span></p>
  </div>
  <div class="footer">
    <div class="content-wrap">
      <p class="copyTxt">Copyright ©2013-2014 tianpin.com All Rights Reserved. </p>
    </div>
  </div>
</div>

<script>
  $(function(){
    var $registArea=$('.registArea');
    var $phone=$registArea.find('.phoneNum');
    var $code=$registArea.find('.codeInput');
    var $error0=$registArea.find('.error0');
    var $error1=$registArea.find('.error1');
    var $error2=$registArea.find('.error2');
    var $error3=$registArea.find('.error3');
    var $error4=$registArea.find('.error4');
    var $registerNext=$('.registerNext');
    var $getCode=$('.getCode');
    var reg = /^1[0-9]{10}$/;
    var $regist01Pop=$('.regist01Pop');
    var $mask=$('.mask');
    var $navList=$('.navs').children('.list');


    function checkNumber(){
      if($phone.val()==''){
        $phone.addClass('errorBor');
        $error1.css('display','none');
        $error0.css('display','none');
        $error2.css('display','block');
        return false;
      }else if(!reg.test($phone.val())){
        $phone.addClass('errorBor');
        $error1.css('display','none');
        $error2.css('display','none');
        $error0.css('display','block');
        return false;
      }else {
        $error1.css('display','none');
        $error2.css('display','none');
        $error0.css('display','none');
        $phone.removeClass('errorBor');
        return true;
      }

      //      if eroor 已经注册
    }



    $phone.on('blur',function(){
      checkNumber();
    });

    $code.on('blur',function(){
      $(this).addClass('errorBor');
      if($code.val()==''){
        $error3.css('display','none');
        $error4.css('display','block');
      }
//      错误的验证码
//      else if(){}



    });

    $registerNext.on('click',function(){
      if($phone.val()==''){
        $error1.css('display','none');
        $error0.css('display','none');
        $error2.css('display','block');
        if(!$phone.hasClass('errorBor')){
          $phone.addClass('errorBor');
        }
      }
      if($code.val()==''){
        $error3.css('display','none');
        $error4.css('display','block');
        if(!$code.hasClass('errorBor')){
          $code.addClass('errorBor');
        }
      }

//      验证通过 跳到下一步骤
     var $index= $navList.children('.current').index();
      $navList.children('li').removeClass('current').eq($index+1).addClass('current');
      $registArea.children('.item').css('display','none').eq($index+1).css('display','block');

    });

    $getCode.on('click',function(){
      if(checkNumber()){
        $mask.css('display','block');
        $regist01Pop.css('display','block');
      }
    })
  })
</script>
</body>
</html>
